<template>
  <div class="student-dashboard">
    <!-- 欢迎卡片 -->
    <el-card class="welcome-card">
      <div class="welcome-content">
        <div class="welcome-text">
          <h2>欢迎回来，{{ studentInfo.name }}！</h2>
          <p class="welcome-desc">学号：{{ studentInfo.studentNo }} | 班级：{{ studentInfo.className }}</p>
        </div>
        <div class="welcome-actions">
          <el-button type="primary" @click="goToApply">
            <el-icon><DocumentAdd /></el-icon> 提交申请
          </el-button>
          <el-button @click="goToProfile">
            <el-icon><User /></el-icon> 个人档案
          </el-button>
        </div>
      </div>
    </el-card>

    <el-row :gutter="20" class="info-cards">
      <!-- 学籍状态 -->
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card status-card">
          <div class="stat-icon">
            <el-icon :size="32" color="#409EFF"><Checked /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-label">学籍状态</div>
            <div class="stat-value">{{ getStatusText(studentInfo.status) }}</div>
          </div>
        </el-card>
      </el-col>

      <!-- 待审批申请 -->
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card pending-card">
          <div class="stat-icon">
            <el-icon :size="32" color="#E6A23C"><Clock /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-label">待审批申请</div>
            <div class="stat-value">{{ statistics.pendingCount || 0 }}</div>
          </div>
        </el-card>
      </el-col>

      <!-- 未读消息 -->
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card message-card">
          <div class="stat-icon">
            <el-icon :size="32" color="#67C23A"><ChatDotRound /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-label">未读消息</div>
            <div class="stat-value">{{ statistics.unreadCount || 0 }}</div>
          </div>
        </el-card>
      </el-col>

      <!-- 总申请数 -->
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card total-card">
          <div class="stat-icon">
            <el-icon :size="32" color="#909399"><Document /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-label">历史申请</div>
            <div class="stat-value">{{ statistics.totalCount || 0 }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <!-- 我的信息 -->
      <el-col :xs="24" :md="12">
        <el-card class="info-card">
          <template #header>
            <div class="card-header">
              <span><el-icon><User /></el-icon> 个人信息</span>
              <el-button type="primary" size="small" text @click="goToProfile">
                查看详情
              </el-button>
            </div>
          </template>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="姓名">{{ studentInfo.name }}</el-descriptions-item>
            <el-descriptions-item label="学号">{{ studentInfo.studentNo }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ studentInfo.gender === 1 ? '男' : '女' }}</el-descriptions-item>
            <el-descriptions-item label="院系">{{ studentInfo.deptName }}</el-descriptions-item>
            <el-descriptions-item label="班级">{{ studentInfo.className }}</el-descriptions-item>
            <el-descriptions-item label="入学年份">{{ studentInfo.enrollYear }}</el-descriptions-item>
            <el-descriptions-item label="学籍状态">
              <el-tag :type="getStatusColor(studentInfo.status)">
                {{ getStatusText(studentInfo.status) }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </el-col>

      <!-- 最近申请 -->
      <el-col :xs="24" :md="12">
        <el-card class="recent-card">
          <template #header>
            <div class="card-header">
              <span><el-icon><Document /></el-icon> 最近申请</span>
              <el-button type="primary" size="small" text @click="goToApply">
                查看全部
              </el-button>
            </div>
          </template>
          <div v-if="recentApplies.length > 0">
            <div 
              v-for="apply in recentApplies" 
              :key="apply.id" 
              class="apply-item"
              @click="viewApplyDetail(apply.id)"
            >
              <div class="apply-header">
                <el-tag :type="getApplyTypeColor(apply.subType)" size="small">
                  {{ apply.subTypeName }}
                </el-tag>
                <span class="apply-time">{{ formatDate(apply.applyTime) }}</span>
              </div>
              <div class="apply-content">{{ apply.content }}</div>
              <div class="apply-footer">
                <el-tag :type="getStatusColor(apply.status)" size="small">
                  {{ getStatusText2(apply.status) }}
                </el-tag>
                <span class="apply-level">{{ apply.approvalLevelName }}</span>
              </div>
            </div>
          </div>
          <el-empty v-else description="暂无申请记录" :image-size="100" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 快速操作 -->
    <el-card class="quick-actions-card">
      <template #header>
        <span><el-icon><Operation /></el-icon> 快速操作</span>
      </template>
      <el-row :gutter="20">
        <el-col :xs="12" :sm="6" :md="4">
          <div class="action-item" @click="quickApply('suspension')">
            <el-icon :size="40" color="#409EFF"><DocumentRemove /></el-icon>
            <div class="action-name">休学申请</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4">
          <div class="action-item" @click="quickApply('transfer')">
            <el-icon :size="40" color="#67C23A"><Switch /></el-icon>
            <div class="action-name">转学申请</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4">
          <div class="action-item" @click="quickApply('return')">
            <el-icon :size="40" color="#E6A23C"><CircleCheck /></el-icon>
            <div class="action-name">复学申请</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4">
          <div class="action-item" @click="goToScore">
            <el-icon :size="40" color="#F56C6C"><DataAnalysis /></el-icon>
            <div class="action-name">成绩查询</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4">
          <div class="action-item" @click="goToMessage">
            <el-icon :size="40" color="#909399"><ChatDotRound /></el-icon>
            <div class="action-name">消息中心</div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="6" :md="4">
          <div class="action-item" @click="goToProfile">
            <el-icon :size="40" color="#606266"><Folder /></el-icon>
            <div class="action-name">我的档案</div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  DocumentAdd,
  User,
  Checked,
  Clock,
  ChatDotRound,
  Document,
  DocumentRemove,
  Switch,
  CircleCheck,
  DataAnalysis,
  Folder,
  Operation
} from '@element-plus/icons-vue'
import { getMyApplies } from '@/api/approval'
import { getMyProfile } from '@/api/student'
import { useUserStore } from '@/store/user'

const router = useRouter()
const userStore = useUserStore()

// 学生信息（从API获取）
const studentInfo = reactive({
  name: userStore.userInfo?.realName || '',
  studentNo: '',
  gender: 1,
  deptName: '',
  className: '',
  enrollYear: null,
  status: 1
})

// 统计数据
const statistics = reactive({
  pendingCount: 0,
  unreadCount: 0,
  totalCount: 0
})

// 最近申请
const recentApplies = ref<any[]>([])

/**
 * 加载学生信息和统计数据
 */
const loadStatistics = async () => {
  try {
    // 从API获取完整的学生信息
    const data = await getMyProfile() as any
    if (data) {
      // 更新学生信息
      studentInfo.name = data.realName || userStore.userInfo?.realName || ''
      studentInfo.studentNo = data.studentNo || ''
      studentInfo.gender = data.gender || 1
      studentInfo.deptName = data.deptName || ''
      studentInfo.className = data.className || ''
      studentInfo.enrollYear = data.enrollYear || null
      studentInfo.status = data.status || 1
      
      // 更新统计数据
      statistics.pendingCount = data.pendingApprovalCount || 0
      statistics.totalCount = data.courseCount || 0
    }
  } catch (error) {
    console.error('加载学生信息失败', error)
  }
}

/**
 * 加载最近申请
 */
const loadRecentApplies = async () => {
  try {
    const data = await getMyApplies({
      current: 1,
      size: 5
    }) as any
    recentApplies.value = data?.records || []
  } catch (error) {
    console.error('加载最近申请失败', error)
  }
}

/**
 * 跳转到申请页面
 */
const goToApply = () => {
  router.push('/student/apply')
}

/**
 * 跳转到个人档案
 */
const goToProfile = () => {
  router.push('/student/profile')
}

/**
 * 跳转到成绩查询
 */
const goToScore = () => {
  router.push('/student/scores')
}

/**
 * 跳转到消息中心
 */
const goToMessage = () => {
  router.push('/message')
}

/**
 * 快速申请
 */
const quickApply = (subType: string) => {
  router.push(`/student/apply?type=${subType}`)
}

/**
 * 查看申请详情
 */
const viewApplyDetail = (id: number) => {
  router.push(`/student/apply?detail=${id}`)
}

/**
 * 获取状态文本
 */
const getStatusText = (status: number) => {
  const textMap: Record<number, string> = {
    1: '在籍',
    2: '休学',
    3: '毕业',
    4: '退学'
  }
  return textMap[status] || '未知'
}

const getStatusText2 = (status: number) => {
  const textMap: Record<number, string> = {
    0: '待审批',
    1: '已通过',
    2: '已拒绝'
  }
  return textMap[status] || '未知'
}

/**
 * 获取状态颜色
 */
const getStatusColor = (status: number) => {
  const colorMap: Record<number, any> = {
    0: 'warning',
    1: 'success',
    2: 'danger',
    3: 'info',
    4: 'danger'
  }
  return colorMap[status] || ''
}

/**
 * 获取申请类型颜色
 */
const getApplyTypeColor = (subType: string) => {
  const colorMap: Record<string, any> = {
    suspension: '',
    transfer: 'success',
    return: 'warning',
    dropout: 'danger'
  }
  return colorMap[subType] || ''
}

/**
 * 格式化日期
 */
const formatDate = (dateTime: string) => {
  if (!dateTime) return '-'
  return dateTime.split('T')[0]
}

onMounted(() => {
  loadStatistics()
  loadRecentApplies()
})
</script>

<style scoped lang="scss">
.student-dashboard {
  padding: 24px;
  background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
  min-height: calc(100vh - 60px);

  .welcome-card {
    margin-bottom: 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.25);

    :deep(.el-card__body) {
      padding: 40px;
    }

    .welcome-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 24px;

      .welcome-text {
        h2 {
          margin: 0 0 12px 0;
          font-size: 32px;
          font-weight: 600;
          letter-spacing: -0.5px;
        }

        .welcome-desc {
          margin: 0;
          opacity: 0.92;
          font-size: 15px;
          font-weight: 300;
        }
      }

      .welcome-actions {
        display: flex;
        gap: 12px;
        
        .el-button {
          border-radius: 10px;
          height: 40px;
          padding: 0 24px;
          font-weight: 500;
          background: rgba(255, 255, 255, 0.15);
          backdrop-filter: blur(10px);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: white;
          transition: all 0.3s ease;
          
          &:hover {
            background: white;
            color: #667eea;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          }
        }
      }
    }
  }

  .info-cards {
    margin-bottom: 24px;

    .stat-card {
      border-radius: 16px;
      border: none;
      background: white;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      
      :deep(.el-card__body) {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 24px;
      }

      .stat-icon {
        flex-shrink: 0;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
        
        .el-icon {
          font-size: 28px;
        }
      }

      .stat-content {
        flex: 1;

        .stat-label {
          font-size: 13px;
          color: #6c757d;
          margin-bottom: 8px;
          font-weight: 500;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .stat-value {
          font-size: 28px;
          font-weight: 700;
          color: #2c3e50;
        }
      }

      &:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      }
      
      // 不同卡片的图标背景色
      &.status-card .stat-icon {
        background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
      }
      
      &.pending-card .stat-icon {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
      }
      
      &.message-card .stat-icon {
        background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
      }
      
      &.total-card .stat-icon {
        background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
      }
    }
  }

  .info-card,
  .recent-card {
    margin-bottom: 24px;
    border-radius: 16px;
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    background: white;
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
      transform: translateY(-2px);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      span {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 18px;
        font-weight: 600;
        color: #2c3e50;
        
        .el-icon {
          color: #667eea;
        }
      }
      
      .el-button {
        border-radius: 8px;
        height: 32px;
        font-weight: 500;
      }
    }
    
    :deep(.el-descriptions) {
      .el-descriptions__label {
        font-weight: 500;
        color: #6c757d;
      }
      
      .el-descriptions__content {
        color: #2c3e50;
      }
    }

    .apply-item {
      padding: 16px;
      border: 1px solid #e9ecef;
      border-radius: 12px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: #f8f9fa;

      &:hover {
        border-color: #667eea;
        background-color: white;
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
        transform: translateX(4px);
      }

      &:last-child {
        margin-bottom: 0;
      }

      .apply-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .apply-time {
          font-size: 13px;
          color: #6c757d;
        }
        
        .el-tag {
          border-radius: 8px;
          font-weight: 500;
        }
      }

      .apply-content {
        font-size: 14px;
        color: #495057;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 1.6;
      }

      .apply-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .apply-level {
          font-size: 12px;
          color: #adb5bd;
          padding: 4px 10px;
          background: white;
          border-radius: 6px;
        }
      }
    }
  }

  .quick-actions-card {
    .card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 18px;
      font-weight: 600;
      color: #2c3e50;
      
      .el-icon {
        color: #667eea;
      }
    }

    .action-item {
      text-align: center;
      padding: 24px 16px;
      border: 2px solid #e9ecef;
      border-radius: 14px;
      cursor: pointer;
      transition: all 0.3s ease;
      background: #f8f9fa;

      &:hover {
        border-color: #667eea;
        background: white;
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.2);
        
        .el-icon {
          transform: scale(1.1);
        }
      }

      .el-icon {
        transition: transform 0.3s ease;
      }

      .action-name {
        margin-top: 12px;
        font-size: 14px;
        font-weight: 500;
        color: #2c3e50;
      }
    }
  }
  
  // 响应式
  @media (max-width: 768px) {
    padding: 16px;
    
    .welcome-card :deep(.el-card__body) {
      padding: 24px;
    }
    
    .welcome-content {
      .welcome-text h2 {
        font-size: 24px;
      }
      
      .welcome-actions {
        width: 100%;
        
        .el-button {
          flex: 1;
        }
      }
    }
    
    .stat-card :deep(.el-card__body) {
      padding: 16px;
    }
  }
}
</style>

